<template>
  <div class="about">
    <!-- 优惠券登录前 -->
    <div class="coupon" v-if="this.ustoken == false">
      <div class="left" v-for="(v, iu) in thipric" :key="iu">
        <div class="different" style="background: red">
          ￥<span>{{ v.coupon_price }}</span>
          <p>满{{ v.use_min_price }}元可用</p>
        </div>
        <div class="Differents" style="background: red" @click="coupon">
          立 即 领 取
        </div>
      </div>
      <div class="right" style="background: red">
        <div class="more">
          <h4>更多<van-icon name="arrow" /></h4>
        </div>
      </div>
    </div>
    <!-- 优惠券登录后 -->
    <div class="coupon" v-else>
      <div class="left" v-for="(v, iu) in thipric" :key="iu">
        <div class="different" style="background: #ccc">
          ￥<span>{{ v.coupon_price }}</span>
          <p>满{{ v.use_min_price }}元可用</p>
        </div>
        <div class="Differents" style="background: #ccc">&ensp;已 领 取</div>
      </div>
      <div class="right" style="background: #ccc">
        <div class="more" @click="coupons">
          &ensp;
          <h4>更多<van-icon name="arrow" /></h4>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getprice } from "@/api/request";
export default {
  data() {
    return {
      ustoken: true,
      thipric: [],
    };
  },
  created() {
    // 获取token
    let token = localStorage.getItem("token");
    // 判断有没有token
    if (token) {
      this.ustoken = true;
    } else {
      this.ustoken = false;
    }
    // 获取优惠券
    getprice().then((res) => {
      this.thipric = res.data.data;
    });
  },
  methods: {
    coupon() {
      this.$router.push("/my");
    },
    coupons() {
      this.$router.push("/my");
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //   padding: 0;
  box-sizing: border-box;
}
// 优惠券
.coupon {
  width: 94%;
  display: flex;
  float: left;
  color: white;
  overflow: auto;
  white-space: nowrap;
  margin-left: 3%;
  margin-top: 3%;
  .left {
    margin-left: 2%;
    height: 80px;
    display: flex;
    .different {
      text-align: center;
      line-height: 35px;
      border-radius: 10px 0px 0px 10px;
      border-right: dashed;
    }
    .Differents {
      writing-mode: vertical-lr;
      border-radius: 0px 10px 10px 0px;
    }
  }
  .right {
    width: 10%;
    line-height: 8px;
    text-align: center;
    margin-left: 3%;
    writing-mode: vertical-lr;
    font-size: 23px;
  }
}
</style>
